<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>文件管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-button
        type="primary"
        size="medium"
        @click="dialogTableVisible1 = true"
        >新增</el-button
      >
      <template>
        <el-table :data="tableData" stripe border style="width: 100%">
          <el-table-column prop="id" label="ID" width="60"> </el-table-column>
          <el-table-column prop="name" label="第一行标题"> </el-table-column>
          <el-table-column prop="xName" label="第二行标题"> </el-table-column>
          <el-table-column label="文件封面">
            <template slot-scope="scope">
              <el-image
                style="width: 100px"
                :src="scope.row.logo"
                :preview-src-list="[scope.row.logo]"
              >
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status" style="color: red">上架</span>
              <span v-else>下架</span>
            </template>
          </el-table-column>
          <el-table-column label="所属栏目">
            <template slot-scope="scope">
              <span v-if="scope.row.type == 1">IPFS学院</span>
              <span v-else-if="scope.row.type == 2">平台动态</span>
              <span v-else>新手帮助</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                :type="scope.row.status === false ? 'primary' : 'success'"
                size="mini"
                @click="Delete(scope.row.id, scope.row.status)"
              >
                {{ scope.row.status === false ? "上架" : "下架" }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 新增发布内容 -->
      <el-dialog title="上传文件" :visible.sync="dialogTableVisible1">
        <el-row :gutter="20" class="row1">
          <el-col :span="4">
            <span>文件名称:</span>
          </el-col>
          <el-col :span="10">
            <el-upload
              class="upload-demo"
              action="https://up-z2.qiniup.com"
              :data="QnFileForm"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :before-upload="beforeUpload"
              :on-success="uploadSuccess"
              :limit="1"
              :on-exceed="handleExceed"
              :file-list="queryinfo.fileList"
            >
              <el-button size="small" type="primary">点击上传文件</el-button>
              <div slot="tip" class="el-upload__tip">上传文件，且不超过10M</div>
            </el-upload>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="row1">
          <el-col :span="4">
            <span>文件封面:</span>
          </el-col>
          <el-col :span="10">
            <el-upload
              class="upload-demo"
              action="https://up-z2.qiniup.com"
              :data="QnFileForm"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :before-upload="beforeUpload"
              :on-success="uploadSuccess1"
              :limit="1"
              :on-exceed="handleExceed"
              :file-list="queryinfo.imgList"
            >
              <el-button size="small" type="primary">点击上传图片</el-button>
              <div slot="tip" class="el-upload__tip">
                上传图片，且不超过500kb
              </div>
            </el-upload>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="row1">
          <el-col :span="4">
            <span>第一行标题:</span>
          </el-col>
          <el-col :span="10">
            <el-input
              v-model="queryinfo.name"
              autocomplete="off"
              placeholder="请输入"
            ></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="row1">
          <el-col :span="4">
            <span>第二行标题:</span>
          </el-col>
          <el-col :span="10">
            <el-input
              v-model="queryinfo.xName"
              autocomplete="off"
              placeholder="请输入"
            ></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="row1">
          <el-col :span="4">
            <span>所属栏目:</span>
          </el-col>
          <el-col :span="10">
            <el-select v-model="queryinfo.type" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="row1">
          <el-col :span="4">
            <span>是否上架:</span>
          </el-col>
          <el-col :span="10">
            <el-switch
              v-model="queryinfo.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="putGoodsList()">发布</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
// 引入七牛云
import * as qiniu from "qiniu-js";
export default {
  data() {
    return {
      tableData: [],
      QnFileForm: {
        key: "",
        token: "",
      },
      queryinfo: {
        url: "",
        logo: "",
        type: "",
        status: true,
        name: "",
        xName: "",
      },
      DeleteInfo: {
        id: "",
        status: "",
      },
      options: [
        {
          value: "1",
          label: "IPFS学院",
        },
        {
          value: "2",
          label: "进阶小课堂",
        },
        {
          value: "3",
          label: "新手导航",
        },
      ],
      value: "",
      dialogTableVisible1: false,
    };
  },
  created() {
    this.getmsglist(1);
  },
  mounted() {
    this.getToken();
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
    //   console.log(file + "8888");
    },
    uploadSuccess() {
      this.queryinfo.url = "http://thap.bee360.com.cn/" + this.QnFileForm.key; //七牛图片地址
    },
    uploadSuccess1() {
      this.queryinfo.logo = "http://thap.bee360.com.cn/" + this.QnFileForm.key; //七牛图片地址
    },
    beforeUpload(file) {
      let fileName = file.name;
      this.QnFileForm.key = new Date().getTime() + fileName;
    },
    // 提示上传文件数量
    handleExceed(files, fileList) {
      this.$message.warning(`当前只限制选择 1 个文件`);
    },
    // 移除上传文件
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //删除图片
    async Delete(id, status) {
      this.DeleteInfo.id = id;
      if (status) {
        this.DeleteInfo.status = false;
      } else {
        this.DeleteInfo.status = true;
      }
      const { data: res } = await this.$http.post(
        "currencyAudit/updateSxyList",
        this.httputil(this.DeleteInfo)
      );
      if (res.code !== 200) return this.$message.error(res.msg);
      this.$message.success(res.msg);
      this.getmsglist();
    },
    // 新增添加文件
    async putGoodsList() {
      const { data: res } = await this.$http.post(
        "currencyAudit/addSxyList",
        this.httputil(this.queryinfo)
      );
      if (res.code !== 200) return this.$message.error(res.msg);
      this.$message.success(res.msg);
      this.getmsglist();
      this.dialogTableVisible1 = false;
      this.queryinfo.type = "";
    },
    // 首页加载
    async getmsglist() {
      const { data: res } = await this.$http.post(
        "currencyAudit/getSxyList",
        this.httputil(this.queryinfo)
      );
      if (res.code !== 200) return this.$message.error(res.msg);
      this.tableData = res.data;
    },
    //页面加载完成后获取tokend
    async getToken() {
      const { data: res } = await this.$http.post(
        "currencyAudit/getQiniuToken"
      );
      if (res.code !== 200) return this.$message.error("获取失败");
      this.QnFileForm.token = res.data.uptoken;
    },
  },
};
</script>
<style lang="less" scoped>
.row1 {
  line-height: 40px;
  font-size: 16px;
  text-align: left;
  margin-bottom: 20px;
}
</style>
